<!DOCTYPE HTML>
<html>
<head>
<title>Baseline Grid examples</title>
<style>
    * { margin: 0px;}
    .container {
        margin: 15px;
        width: 200px;
        height: 250px;
        overflow: hidden;
        background: repeating-linear-gradient(to bottom, white 0px, white 29px, black 30px);
        background-size: 30px 30px; /* fixes too-light lines for some reason */ 
        display: flex;
    }

    .container.top {
        align-items: flex-start;
    }
    .container.bottom {
        align-items: flex-end;
    }
    .container.center {
        align-items: center;
    }

    .block {
        border: thin green solid;
        width: 100%;
    }

    h2 {
        background-color: rgba(255, 255, 180, .5);
        font-size: 24px;
        line-height: 30px;
    }

    p {
        background-color: rgba(255, 255, 180, .5);
        font-size: 16px;
        line-height: 20px;
    }

    .snap .one {
        margin-top: 15px;
    }
    .snap .two {
        margin-top: 10px;
    }
    .snap .three {
        margin-top: 10px;
    }

    .bottom .snap .three {
        margin-bottom: 3px;
    }

    .center .snap .one {
        margin-top: 0px;
    }
    .center .snap .three {
        margin-top: 10px;
        margin-bottom: 18px;
    }

    /* first step for center 
    .center .two {
        margin-top: 10px;
    }
    .center .three {
        margin-top: 10px;
    } */

    /* second step for center without line 3 
    .center .snap .one {
        margin-top: 11px;
    } */

    label {
        margin: 10px;
    }
</style>
</head>
<body>

<div class="container top">
<div class="block">
    <h2>Not Snapped A</h2>
    <p class=one>Snap 1</p>
    <p class=two>Snap 2</p>
    <h2>Not Snapped B</h2>
    <p class=three>Snap 3</p>
</div>   
</div>
<form name="switches">
    <label>Top
        <input type="radio" name="alignment" value="top" onClick="setAlignment()" checked>
    </label>
    <label>Center
        <input type="radio" name="alignment" value="center" onClick="setAlignment()" >
    </label>
    <label>Bottom
        <input type="radio" name="alignment" value="bottom" onClick="setAlignment()" >
    </label>
    <label>Snap
        <input type="checkbox" name="snap" onClick="toggleSnap()">
    </label>
</form>

<script type="text/javascript">

function toggleSnap() {
    var blockElement = document.querySelector(".block");
    if (document.switches.snap.checked == true) {
        blockElement.className = "block snap";
    }
    else {
        blockElement.className = "block";
    }
}

function setAlignment() {
    var containerElement = document.querySelector(".container");
    for (i=0; i < document.switches.alignment.length; i++) {
        if (document.switches.alignment[i].checked == true) {
            containerElement.className = "container " + document.switches.alignment[i].value;
        }
    }
}
</script>

</body>
</html>